<template>
  <view>
    <view class=" u-p-t-10 u-p-b-20">
      <view class=" w-100p">
        <div class="pinmu-box">
          <div class="pinmu-title">{{chartName}}</div>
          <view class="closeicon">
            <u-image src="/static/image/icon-hp.png" width="50rpx" height="50rpx" @click="goPage"></u-image>
          </view>
        </div>

        <div>
          <div class="unit">{{ chartNameType==='1'?'万吨':'米' }}</div>
          <!-- <div class="xiana"><u-icon name="arrow-down-fill" @click="openPop"></u-icon></div> -->
        </div>

        <view class="charts-box u-m-t-10">
          <qiun-data-charts type="line" :opts="opts" :chartData="chartData" />

        </view>
      </view>

    </view>

    <div class="month-box">
      <div class="month-item" @click="changeMonth(3)" :class="monthActive == 3 ? 'month-item-active' : ''">近三月</div>
      <div class="month-item" @click="changeMonth(6)" :class="monthActive == 6 ? 'month-item-active' : ''">近六月</div>
      <div class="month-item" @click="changeMonth(12)" :class="monthActive == 12 ? 'month-item-active' : ''">近十二月
      </div>
    </div>

    <u-popup v-model="show" mode="bottom" @close="closePop">
      <view class="pop-box">
        <div class="pop-title">切换标的</div>
        <u-line></u-line>
        <div class="u-p-20">
          <div v-for="obj in popList">
            <div class="u-p-t-20 u-p-b-20" @click="selectItem(obj)">
              <span>{{ obj.txt }}</span>
              <u-icon name="checkbox-mark" color="rgb(61, 95, 255)" v-if="obj.checked"></u-icon>
            </div>
            <u-line></u-line>
          </div>
        </div>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  watch: {
    'customerId': {
      immediate: true,
      handler: function (newval) {

        if (newval) {
          this.init()
        }
      },
    },
        // 'countyNo': {
        //   immediate: true,
        //   handler: function (newval) {
        //     if (newval) {
        //       this.init()
        //     }
        //   },
        // },
  },
  props: {
    customerId: {
      type: String,
      default: ''
    },
    countyNo: {
          type: String,
          default: ''
        },
    chartNameType: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      popList: [
        {
          val: 1,
          txt: '原始地质储量（万吨）',
          checked: false
        },
        {
          val: 2,
          txt: '设计可采储量（万吨）',
          checked: false
        }
      ],
      show: false,
      monthActive: '6',
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 10, 0, 15],
        enableScroll: false,
        xAxis: {
          disableGrid: true,
          labelCount:1
        },
        dataLabel:false,
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          splitNumber:2
        },
        legend: {
          position: 'top'
        },
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow"
          }
        }
      },
      currentDate: new Date(), // 当前日期
      startMonth:'',
      endMonth:'',
      chartName:''
    };
  },
  created () {
    this.init()
    // this.getServerData();
  },
  methods: {
    init(){
      this.chartName =this.chartNameType==='1'?'原煤生产计划完成趋势图':'掘进进尺计划完成趋势图'
                this.threeMonthsAgo = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 3, 1);
                this.sixMonthsAgo = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 6, 1);
                this.oneYearAgo = new Date(this.currentDate.getFullYear() - 1, this.currentDate.getMonth(), 1);
                this.startMonth = this.$formatDate(this.sixMonthsAgo, 'yyyy-MM')
                this.endMonth = this.$formatDate( new Date(), 'yyyy-MM')
                this.getServerData();
    },
    selectItem (obj) {
      obj.checked = !obj.checked
    },
    openPop () {
      this.show = true
    },
    closePop () {
      console.log(this.popList);
    },
    changeMonth (val) {
      if(val===3){
      this.startMonth = this.$formatDate(this.threeMonthsAgo, 'yyyy-MM')
      }else if(val===6){
        this.startMonth = this.$formatDate(this.sixMonthsAgo, 'yyyy-MM')
      }else{
        this.startMonth = this.$formatDate(this.oneYearAgo, 'yyyy-MM')
      }
      this.getServerData()
      this.monthActive = val
    },
    goPage () {
      let data = {
        chartName:this.chartName,
        chartData:this.chartData,
        unit:this.chartNameType==='1'?'万吨':'米'
      }
      uni.navigateTo({
        url: '/pages/cjt/basicInformation/trendJj/bigChart?data='+JSON.stringify(data)
      })
    },
    getServerData () {
      let data = {
        countyNo:this.countyNo,
        customerId:this.customerId,
        startMonth:this.startMonth,
        endMonth:this.endMonth
      }
      this.$post('/cjt/app/statisticPlanAndProduce',data).then(result=>{
        if (result.body) {
        const arr = result.body
        if(this.chartNameType==='1'){
            let res = {
            categories: arr.map(el => el.month),
            series: [
              {
                name: "月计划",
                type: 'line',
                data: arr.map(el => el.cmMonthPlan),
                stack: 'Total',
                label:{
                show:false
              }
              },
              {
                name: "月累计完成",
                type: 'line',
                data: arr.map(el => el.cmMonthCoalYield),
                stack: 'Total',
                label:{
                show:false
              }
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }else{
          let res = {
            categories: arr.map(el => el.month),
            series: [
              {
                name: "月计划",
                type: 'line',
                data: arr.map(el => el.jjMonthPlan),
                stack: 'Total',
                label:{
                show:false
              }
              },
              {
                name: "月累计完成",
                type: 'line',
                data: arr.map(el => el.jjMonthDrivingLength),
                stack: 'Total',
                label:{
                show:false
              }
              }
            ]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }

      }
      })
      // const result = {
      //   "code": 200,
      //   "data": "",
      //   "sign": false,
      //   "body": [
      //     {
      //       "times": "2024-01",
      //       "month": "1月",
      //       "entryCount": 0,
      //       "trainPeopleCount": 0,
      //       "completedCount": 0
      //     },
      //     {
      //       "times": "2024-02",
      //       "month": "2月",
      //       "entryCount": 0,
      //       "trainPeopleCount": 0,
      //       "completedCount": 0
      //     },
      //     {
      //       "times": "2024-03",
      //       "month": "3月",
      //       "entryCount": 0,
      //       "trainPeopleCount": 0,
      //       "completedCount": 0
      //     }
      //   ]
      // }

      //this.$get(`/train/trainCompleteTrend?customerNo=${this.customerNo}`).then(result => {
      // if (result.body) {
      //   const arr = result.body

      //   let res = {
      //     categories: arr.map(el => el.month),
      //     series: [
      //       {
      //         name: "入职人数",
      //         data: arr.map(el => el.entryCount)
      //       },
      //       {
      //         name: "参与培训人数",
      //         data: arr.map(el => el.trainPeopleCount)
      //       },
      //       {
      //         name: "达标人数",
      //         data: arr.map(el => el.completedCount)
      //       }
      //     ]
      //   };
      //   this.chartData = JSON.parse(JSON.stringify(res));
      // }
      //})
    },
  }
};
</script>

<style lang="scss" scoped>
.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 250px;
}

.month-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-radius: 2px, 0px, 0px, 2px;
  padding: 25px;

  .month-item {
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid rgb(229, 229, 229);
    font-size: 10px
  }

  .month-item-active {
    border-color: rgba(91, 172, 132, 0.5);
    background: rgb(238, 247, 242);
    color: rgb(91, 172, 132)
  }
}

.unit {
  margin-left: 10px;
  position: absolute
}

.xiana {
  position: absolute;
  right: 10px;
  z-index: 999;
}

.pop-box {
  .pop-title {
    text-align: center;
    padding: 10px
  }
}

.pinmu-box {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  padding-top: 0;

  .pinmu-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
  }
}
</style>